<template>
  <el-table
    :data="tableData"
    border
    style="width: 800px"
    :cell-class-name="getCellStyleClassName">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="lastRank"
      label="上次排名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="curRank"
      label="本次排名">
    </el-table-column>
    <el-table-column
        prop="photo"
        label="照片">
      <template slot-scope="scope">
        <img :src="scope.row.photo" alt="">
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
	export default {
		name: "Table1",
		data() {
			return {
				tableData: [{
					name: '张三',
          lastRank: 10,
          curRank: 8,
          photo: "",
				}, {
					name: '李四',
					lastRank: 3,
					curRank: 5,
          photo: "",
				}, {
					name: '王五',
					lastRank: 6,
					curRank: 9,
          photo: "",
				}, {
					name: '赵丽',
					lastRank: 8,
					curRank: 5,
          photo: "",
				}]
			}
		},
    methods: {

			// 使用cell-style, 直接返回样式 需要在el-table 标签上加上 :cell-style="setCellStyle"
			// setCellStyle({row, column, rowIndex, columnIndex}) {
			// 	console.log(rowIndex, columnIndex, row.name);
			// 	if (columnIndex === 2) {
			// 		if (row.lastRank < row.curRank) {
			// 			// row.curRank = row.curRank + "↑";
			// 			return {
			// 				color: 'red',
      //       }
			// 		} else if (row.lastRank > row.curRank) {
			// 			// row.curRank = row.curRank + "↓";
			// 			return {
			// 				color: 'blue'
      //       }
      //     }
      //   }
      // },

      // 返回样式类名的方式(推荐做法)
      getCellStyleClassName({row, column, rowIndex, columnIndex}) {
				if (columnIndex === 2) {
					if (row.lastRank < row.curRank) {
            return 'progressed';
					} else if (row.lastRank > row.curRank) {
						return 'fall'
          }
				}
      }
    }
	}
</script>

<!-- 注意这里不能加 scoped 否则样式不生效！！-->
<style>
  .progressed {
    color: red;
  }
  .progressed div::after {
    content: '↑';
  }

  .fall {
    color: blue;
  }
  .fall div::after {
    content: '↓';
  }

</style>
